<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <style>
        .col,.col-3,.col-6{
            border: 1px solid blueviolet;
        }
    </style>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <h3 class="alert alert-primary">标签</h3>
    <div class="alert alert-primary">提示</div>
    <div class="alert alert-danger">
        A simple danger alert—check it out!
    </div>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>
    <hr>
    <input class="btn btn-primary" type="button" value="按钮">
    <hr>
    <button type="button" class="btn btn-warning btn-sm">Warning</button>
    <hr>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-secondary">Secondary</button>
        <button type="button" class="btn btn-success">Success</button>
    </div>
    <hr>
    <button type="button" class="btn btn-primary"
            data-bs-toggle="collapse" href="#text"
    >折叠窗口</button>
    <div class="collapse" id="text">
        <div class="card">
            <div class="card-header">头</div>
            <div class="card-body">
            The collapse plugin supports horizontal collapsing. Add the .collapse-horizontal modifier class to transition the width instead of height and set a width on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our width utilities.
            </div>
            <div class="card-footer">
                <input class="btn btn-primary" type="button" value="按钮">
            </div>
        </div>
    </div>
    <hr>
    <div class="container" style="background-color: #efefef">
        <div class="row">
            <div class="col">1-1</div>
        </div>
        <div class="row">
            <div class="col">2-1</div>
            <div class="col">2-2</div>
            <div class="col">2-3</div>
        </div>
        <div class="row">
            <div class="col-6">3-1</div>
        </div>
        <div class="row justify-content-between">
            <div class="col-3">4-1</div>
            <div class="col-3">4-2</div>
        </div>
    </div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>